<!--
 * @Author: 17607638761 2856491026@qq.com
 * @Date: 2023-05-17 14:38:02
 * @LastEditors: 17607638761 zoujiaying@yuandian.com
 * @LastEditTime: 2023-07-28 10:54:34
 * @FilePath: \bpm-ui\src\components\YdEcharts\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div :id="refVal" class="app-echarts"></div>
</template>
<script lang="ts" setup>
import { inject, onMounted, watch, getCurrentInstance, nextTick } from 'vue';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/legend';
// 引入我自定义的图像option类型

interface Props {
	refVal: string;
	isAnimationScroll?: boolean;
	options: any;
	isResize?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
	refVal: '',
	isAnimationScroll: false,
	options: () => {},
	isResize: true,
});

const emit = defineEmits<{
	(event: 'echartsClick', e: any): void;
}>();

let echarts = inject<any>('echarts');

// 将echart的创建，压缩成一个方程
let echartInit = () => {
	// 先将原先的图表实例删除，这样就不会出现数据刷新且图表宽高始终100px的问题，在el-tabs组件中第一个tab页中常见
	echarts.default.dispose(document.getElementById(props.refVal));
	// 将option选项抽离出来
	let option = props.options;
	let myChart = echarts.default.init(document.getElementById(props.refVal));
	option && myChart.setOption(option);

	// 将图表设置为自动轮播
	// let currentIndex = 0;
	// if (option.xAxis) {
	// 	setInterval(function () {
	// 		// 计算下一个要展示的数据索引
	// 		let dataLen = option.xAxis[0].data.length;
	// 		currentIndex = (currentIndex + 1) % dataLen;
	// 		// 更新轮播图组件的范围
	// 		myChart.dispatchAction({
	// 			type: 'dataZoom',
	// 			startValue: currentIndex,
	// 			endValue: currentIndex + 2,
	// 		});
	// 	}, 2000);
	// }
	// // 使用上面定义的图表选项设置图表
	// myChart.setOption(option);

	//防止重复触发点击事件,在渲染点击事件之前先清除点击事件
	myChart.off('click');
	myChart.on('click', function (e: any) {
		emit('echartsClick', e);
	});
	// myChart.getZr().on('click', function (e: any) {
	// 	// console.log(e, 111);
	// 	const pointInPixel = [e.offsetX, e.offsetY];
	// 	let xIndex;
	// 	if (myChart.containPixel('grid', pointInPixel)) {
	// 		// xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [e.offsetX, e.offsetY]);
	// 		xIndex = myChart.convertFromPixel({ seriesName: 0 }, [e.offsetX, e.offsetY]);
	// 		/*事件处理代码书写位置*/
	// 	}

	// 	const echartsInstance = echarts.default.getInstanceByDom(document.getElementById(props.refVal));
	// 	// 获取当前的配置项
	// 	const option = echartsInstance.getOption();

	// 	// 获取某个系列的数据
	// 	const seriesData = option.series[0].data;

	// 	// 获取数值轴或类目轴的类型
	// 	const axisType = option.xAxis[0].type;

	// 	// 获取数据项的坐标值
	// 	let dataIndex = -1;
	// 	const dataCoord: any[] = [];
	// 	seriesData.forEach((item: any, index: number) => {
	// 		console.log(item, '111		');

	// 		if (item.name === 'XXX') {
	// 			// 'XXX' 是待转换 name 值
	// 			dataIndex = index;
	// 			dataCoord.push(item.value); // 收集坐标数据
	// 		}
	// 	});
	// 	console.log(dataCoord, '000');
	// 	emit('echartsClick', xIndex);
	// });
	//自适应大小
	window.addEventListener('resize', () => {
		myChart.resize();
	});
};
onMounted(() => {
	echartInit();
});

watch(
	() => props.options,
	(newVal: any) => {
		console.log('echarts监听options传参', newVal, props.refVal);
		echartInit();
	},
	{
		deep: true,
	}
);
defineExpose({
	echartInit,
});
</script>

<style lang="scss" scoped>
.app-echarts {
	width: 100%;
	height: 100%;
}
</style>
